<template>
  <div>
    <div class="match-performance-items">
      <div @click="clickPerformance(item)"
           v-for="(item,index) in performance"
           :key="index"
           class="performanceClass"
           :class="{ active:activePerformance === item}">
          {{item}}
      </div>
    </div>
    <div class="box-card">
      <el-container>
        <el-header height="57px" class="pass-header">
          <div class="season-selector">
            <el-select class="choose-season"
                       v-model="season"
                       @focus="setMinWidthEmpty"
                       style = 'width:150px'
                       placeholder="请选择赛季">
              <el-option
                      v-for="item in options"
                      :key="item.season"
                      :label="item.label"
                      :value="item.season">
              </el-option>
            </el-select>
          </div>
        </el-header>
        <el-main class="pass-main">
          <ShooterTable :season="season" v-show="activePerformance==='射手榜'"/>
          <AssistsTable :season="season" v-show="activePerformance==='助攻榜'"/>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
  import mixin from "../../../mixin/mixin";
  import Progress from "./Progress";
  import ShooterTable from "./ShooterTable";
  import AssistsTable from "./AssistsTable";
  import axios from "axios";
  export default {
    name: "PlayerRank",
    mixins:[mixin],
    components:{
      ShooterTable,
      Progress,
      AssistsTable
    },
    data(){
      return {
        //联赛Id 中超6 中甲5
        leagueId:6,
        //tab-bar当前名称
        rankMethods:'scoreRank',
        //射手榜数据
        shooterList:[],
        activePerformance:'射手榜',
        performance:['射手榜','助攻榜'],
        //el-selector的下拉选项配置
        options:[
          {
            season: '2019赛季',
            label:  '2019赛季'
          },
          {
            season: '2018赛季',
            label:  '2018赛季'
          },
          {
            season: '2017赛季',
            label:  '2017赛季'
          },
          {
            season: '2016赛季',
            label:  '2016赛季'
          },
        ],
        season:'2019赛季'
      }
    },
    methods:{
      //点击 '组织','射门','防守','技术' 切换
      clickPerformance(item){
        this.activePerformance = item
      },
    },
    computed:{

    },
    created() {

    },

  }
</script>

<style scoped lang="scss">

  .match-performance-items {
    display: flex;
    justify-content: flex-start;
    width:  1440px;
    height: 56px;
    margin: 40px  auto  0;
    /*background-color: red;*/
  }
  .performanceClass {
    color: white;
    line-height: 56px;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 5px;
    text-align: center;
    width: 132px;
    height: 100%;
    background-color: #9E9E9E;
    border-radius: 10px 10px 0 0;
    margin-right: 3px;
  }
  .performanceClass:hover {
    color: #16C79A;
    background-color: #194568;
    cursor: pointer;
  }
  .active {
    color: #16C79A;
    background-color: #194568;
  }

  .box-card {
    margin: auto;
    width:  1440px;
    height: 553px;
  }
  .pass-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #194568;
    padding: 0;
    div {
      margin-right: 10px;
    }
  }
  .pass-main {
    height: 830px;
    padding: 0;
    background-color: #F1F6F9;
  }

</style>